<template>
  <div>
    <el-form
      :model="auditForm"
      :rules="auditRules"
      ref="auditForm"
      label-position="right"
      label-width="100px"
    >
      <div class="haruyuki-mt-40"></div>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="驳回类型:" prop="auditType">
            <el-select
              class="haruyuki-width-100"
              size="small"
              value-key="id"
              v-model="auditForm.auditType"
              @change="selectAuditType"
              placeholder="请选择驳回类型"
            >
              <el-option
                v-for="item in auditTypeOptions"
                :key="item.id"
                :label="item.dataItem"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="驳回理由:" prop="auditReason">
            <el-select
              class="haruyuki-width-100"
              size="small"
              value-key="id"
              v-model="auditForm.auditReason"
              @change="selectAuditReason"
              placeholder="请选择驳回理由"
            >
              <el-option
                v-for="item in auditReasonOptions"
                :key="item.id"
                :label="item.dataItem"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="处理方式:" prop="auditWay">
            <el-select
              class="haruyuki-width-100"
              size="small"
              value-key="id"
              v-model="auditForm.auditWay"
              @change="selectAuditWay"
              placeholder="请选择处理方式"
            >
              <el-option
                v-for="item in auditWayOptions"
                :key="item.id"
                :label="item.dataItem"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div class="m-t-3">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="addRejectRecord"
              >添加</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getRejectList } from "@/api/plugin/workflow/process";
export default {
  props: {
    // auditForm: Object,
    rejectList: Array,
    comment: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      auditForm: {
        auditType: "",
        auditReason: "",
        auditWay: "",
      },
      auditRules: {
      },
      auditTypeOptions: [],
      auditReasonOptions: [],
      auditWayOptions: [],
      rejectTypeName: "",
      rejectReason: "",
      rejectSolution: "",
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.rejectList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  created() {
    this.getReject();
  },
  methods: {
    /* 提交审核 */
    submitAudit() {
      if (!this.auditForm.auditType)
        return this.$message({ type: "warning", message: "请选择驳回类型!" });
      if (!this.auditForm.auditReason)
        return this.$message({ type: "warning", message: "请选择驳回理由!" });
      if (!this.auditForm.auditWay)
        return this.$message({ type: "warning", message: "请选择处理方式!" });
      if (this.rejectList.length === 0)
        return this.$message({ type: "warning", message: "请添加驳回记录!" });
    },
    getAuditMerRecord() {
      // const id = this.$route.query.id;
      const audit = {
        id: id,
        ids: this.ids || "",
      };
      // auditMerRecord(audit).then(
      //   (res) => {
      //     this.$emit("submitAudit", res.data.code);
      //     if (res.data.code === 200) {
      //       this.$message({
      //         type: "success",
      //         message: "审核成功!",
      //       });
      //     } else {
      //       this.$message({
      //         type: "error",
      //         message: res.data.message,
      //       });
      //     }
      //   },
      //   (error) => {
      //     window.console.log(error);
      //   }
      // );
    },
    /* 新增驳回记录 */
    addRejectRecord() {
      if (!this.auditForm.auditType)
        return this.$message({ type: "warning", message: "请选择驳回类型!" });
      if (!this.auditForm.auditReason)
        return this.$message({ type: "warning", message: "请选择驳回理由!" });
      if (!this.auditForm.auditWay)
        return this.$message({ type: "warning", message: "请选择处理方式!" });
      this.rejectList.push({
        id: this.auditForm.auditWay.id,
        // rejectTypeName: this.rejectTypeName,
        // rejectReason: this.rejectReason,
        // rejectSolution: this.rejectSolution,
      });
      this.comment += `${this.rejectTypeName},${this.rejectReason},${this.rejectSolution}。`;
      console.log(this.rejectList, this.comment, 'this.comment');
    },
    /* 驳回类型查询 */
    getReject() {
      getRejectList().then((res) => {
        this.auditTypeOptions = res.data.data;
      });
    },
    /* 选择驳回类型 */
    selectAuditType(e) {
      getRejectList(e.id).then((res) => {
        this.auditReasonOptions = res.data.data;
        this.rejectTypeName = e.dataItem;
      });
    },
    /* 选择驳回理由 */
    selectAuditReason(e) {
      getRejectList(e.id).then((res) => {
        this.auditWayOptions = res.data.data;
        this.rejectReason = e.dataItem;
      });
    },
    selectAuditWay(e) {
      this.rejectSolution = e.dataItem;
    },
  },
};
</script>

<style lang="scss" scoped>
.m-t-3 {
  margin-top: 3px;
}
</style>